<template>
  <div class="temperature pad">
    <div class="head">
      <span>体温打卡</span>
    </div>
    <div class="m-t-b">
      <el-date-picker
        v-model="dateArr"
        clearable
        type="daterange"
        value-format="yyyy-MM-dd"
        @change="handlePickerChange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" @click="handleSearch">
        <i class="el-icon-search"></i>
        搜索
      </el-button>
    </div>
    <el-table stripe border :data="temperatures" class="m-t-b" v-loading="loading">
      <el-table-column label="微信用户昵称" prop="parentNickname"></el-table-column>
      <el-table-column label="成员昵称" prop="nickname"></el-table-column>
      <el-table-column label="关联关系" prop="relationship"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="lookTemperatureRecord(scope.row)">查看体温打卡记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="count">
    </el-pagination>
    <el-dialog :visible.sync="showDialog" title="体温打卡详细记录">
      <el-table border stripe :data="records">
        <el-table-column label="打卡时间" prop="createDate"></el-table-column>
        <el-table-column label="打卡体温">
          <template slot-scope="scope">
            {{scope.row.temperature}}℃
          </template>
        </el-table-column>
        <el-table-column label="打卡地点" prop="address"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllTemperature
} from '../api';
import { formatDate } from '../util';

export default {
  name: 'temperature',
  data () {
    return {
      temperatures: [],
      pageSize: 10,
      showDialog: false,
      records: [],
      loading: true,
      dateArr: '',
      count: 0
    }
  },
  methods: {
    fetchTemperature (index, s, e) { // 获取体温打卡记录
      this.loading = true;
      s = s ? `${s} 00:00:00` : null;
      e = e ? `${e} 23:59:59` : null;
      getAllTemperature({
        index,
        count: this.pageSize,
        queryParam: {
          inputStartTime: s,
          inputEndTime: e
        }
      })
      .then(res => {
        this.loading = false
        if (res.data.msg) {
          this.count = res.data.data.totalRecord;
          let list = res.data.data.list;
          let len = list.length;
          for (let i = 0; i < len; i ++) {
            let cur = list[i].temperatures;
            for (let j = 0; j < cur.length; j ++) {
              cur[j].createDate = formatDate(cur[j].createDate, 'ZH')
            }
          };
          this.temperatures = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.loading = false;
        this.$message.error('网络异常!')
      })
    },
    lookTemperatureRecord (data) { // 显示打卡记录
      if (!this.$checkAuth('canSeeTemperatureRecord')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.records = data.temperatures;
      this.showDialog = true
    },
    handlePagi (page) { // 分页
      if (this.dateArr) {
        this.fetchTemperature(page, this.dateArr[0], this.dateArr[1])
      } else {
        this.fetchTemperature(page)
      }
    },
    handleSearch () { // 搜索逻辑
      if (!this.$checkAuth('canComputeTemperature')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.dateArr) {
        return this.$message.error('搜索内容不能为空!')
      };
      this.fetchTemperature(1, this.dateArr[0], this.dateArr[1])
    },
    handlePickerChange (date) { // 日期区间改变
      if (!date) {
        this.fetchTemperature(1)
      }
    }
  },
  created () {
    this.fetchTemperature(1)
  }
}
</script>
<style lang="scss">
  .temperature {
    .cell {
      text-align: center;
    }
  }
  .el-date-editor .el-range-separator {
    width: 8%!important;
  }
</style>
